import Basemap = require('esri/Basemap');
import { Point } from 'esri/geometry';
import FeatureLayer = require('esri/layers/FeatureLayer');
import TileLayer = require('esri/layers/TileLayer');
import VectorTileLayer = require('esri/layers/VectorTileLayer');
import WebTileLayer = require('esri/layers/WebTileLayer');
import Map = require('esri/Map');
import { TextSymbol } from 'esri/symbols';
import MapView = require('esri/views/MapView');

import Config from './../../js/modules/Config.js';
import Resize from './../../js/modules/windowResize.js';
import BasemapToggle from './../../js/widgets/basemapToggle/basemapToggle.js';
import LayerList from './../../js/widgets/layerList/layerList.js';

Resize.resize();
$(window).resize(() => Resize.resize());

const basemap_geoq = new Basemap({
    baseLayers: [
        new TileLayer({
            url: Config.mapConfig.basemap_geoq
        })
    ],
    id: "basemap_geoq",
    title: "basemap_geoq"
});
const tdtyx_Lyr = new WebTileLayer({
    urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=img_w&x={col}&y={row}&l={level}",
    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6"]
});
const tdtbz_Lyr = new WebTileLayer({
    urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=cia_w&x={col}&y={row}&l={level}",
    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6"]
})
const basemap_tdt = new Basemap({
    baseLayers: [tdtyx_Lyr, tdtbz_Lyr],
    id: "basemap_tdt",
    title: "basemap_tdt"
});
const map = new Map({
    basemap: basemap_geoq,
});
const mapView = new MapView({
    container: "mapView",
    map: map,
    center: {
        x: 12957012.647930505,
        y: 4852523.526340577,
        spatialReference: 102100
    } as any as Point,
    zoom: 12
});
const mapLyr_chezhan = new FeatureLayer({
    url: Config.mapConfig.mapLyr_chezhan + "/0",
    opacity: 0.7,
    labelingInfo: [{
        labelExpressionInfo: {
            expression: "$feature.RefName"
        },
        labelPlacement: "always-horizontal",
        symbol: {
            type: "text",
            color: "black"
        } as any as TextSymbol
    }]
});
const mapLyr_qujian = new FeatureLayer({
    url: Config.mapConfig.mapLyr_qujian + "/0",
    opacity: 0.7,
    labelingInfo: [{
        labelExpressionInfo: {
            expression: "$feature.RefName"
        },
        labelPlacement: "always-horizontal",
        symbol: {
            type: "text",
            color: "black"
        } as any as TextSymbol
    }]
});
const mapLyr_baohuqu = new VectorTileLayer({
    url: Config.mapConfig.mapLyr_baohuqu,
    opacity: 0.5,
});
const mapLyr_dixingtu = new VectorTileLayer({
    url: Config.mapConfig.mapLyr_dixingtu
});
map.addMany([mapLyr_dixingtu, mapLyr_baohuqu, mapLyr_qujian, mapLyr_chezhan]);
//地图切换小部件
const basemapToggle = new BasemapToggle("#basemapTogDiv", map, function (result: string) {
    if (result === "geoq") {
        map.basemap = basemap_tdt;
    } else {
        map.basemap = basemap_geoq;
    }
});
basemapToggle.startup();
//图层列表小部件
const layerList = new LayerList(map, mapView, "#layerListDiv");
layerList.startup();